/* eslint-disable no-useless-concat */
import React, {PureComponent} from 'react';
import {Table, Card, Row, Col} from 'antd';
import moment from 'moment';
import DataSet from '@antv/data-set';
import PropTypes from 'prop-types';
import {
    TABLE,
    COMMON_TABLE_QUERY_FAIL_TEXT,
    COMMON_TABLE_EMPTY_TEXT} from '../constants';
import {formatPercent} from '../utils';
import {injectIntl, formatMessage} from './intl';
import {isYesNo, reportFormList} from '../Enum';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import {Chart, Geom, Axis, Tooltip, Legend, Label, View} from 'bizcharts';
const year = moment(new Date()).format('YYYY');
export class TablePanel extends PureComponent {
    state = {
        loading: false
    };
    render() {
        const {conditions, data, loading, hasError} = this.props;
        const columnsfalse = [{
            title: formatMessage({
                id: 'tablePanel.column.sernum',
                defaultMessage: '序号'
            }),
            dataIndex: 'sernum',
            render: (t, d, i) => i + 1
        }, {
            title: formatMessage({
                id: 'tablePanel.column.region',
                defaultMessage: '区域'
            }),
            dataIndex: 'region'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.dealerCode',
                defaultMessage: '总代'
            }),
            dataIndex: 'dealerCode'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.market',
                defaultMessage: '市场'
            }),
            dataIndex: 'market'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.time',
                defaultMessage: '时间'
            }),
            dataIndex: 'time'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.num',
                defaultMessage: '数量'
            }),
            dataIndex: 'num'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.acceptNum',
                defaultMessage: '接受数量'
            }),
            dataIndex: 'acceptNum'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.returnNum',
                defaultMessage: '退回数量'
            }),
            dataIndex: 'returnNum'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.claimsRejectNum',
                defaultMessage: '拒赔数量'
            }),
            dataIndex: 'claimsRejectNum'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.monthEndNum',
                defaultMessage: '本月未审数'
            }),
            dataIndex: 'monthEndNum'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.crossMonthNum',
                defaultMessage: '跨月数量'
            }),
            dataIndex: 'crossMonthNum'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.onePassNum',
                defaultMessage: '一次通过数'
            }),
            dataIndex: 'onePassNum'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.onePassRate',
                defaultMessage: '一次通过率'
            }),
            dataIndex: 'onePassRate',
            render: t => formatPercent(t)
        }, {
            title: formatMessage({
                id: 'tablePanel.column.passRate',
                defaultMessage: '通过率'
            }),
            dataIndex: 'passRate',
            render: t => formatPercent(t)
        }];
        const columnsTrue = [{
            title: formatMessage({
                id: 'tablePanel.column.month',
                defaultMessage: '月份'
            }),
            dataIndex: 'month',
            render: t => `${t}${formatMessage({
                id: 'tablePanel.list.month',
                defaultMessage: '月'
            })}`
        }, {
            title: `${year - 1}` + `${formatMessage({
                id: 'tablePanel.list.endApplyNum',
                defaultMessage: '申请数量'
            })}`,
            dataIndex: 'startApplyNum'
        }, {
            title: `${year}` + `${formatMessage({
                id: 'tablePanel.list.endApplyNum',
                defaultMessage: '申请数量'
            })}`,
            dataIndex: 'endApplyNum'
        }, {
            title: `${year - 1}` + `${formatMessage({
                id: 'tablePanel.list.endPassRate',
                defaultMessage: '通过率'
            })}`,
            dataIndex: 'startPassRate',
            render: t => formatPercent(t)
        }, {
            title: `${year}` + `${formatMessage({
                id: 'tablePanel.list.endPassRate',
                defaultMessage: '通过率'
            })}`,
            dataIndex: 'endPassRate',
            render: t => formatPercent(t)
        }];
        const locale = {
            emptyText: hasError ? COMMON_TABLE_QUERY_FAIL_TEXT : COMMON_TABLE_EMPTY_TEXT
        };
        const list = data.map(v => ({
            month: v.month,
            [`${year - 1}` + `${formatMessage({
                id: 'tablePanel.list.endApplyNum',
                defaultMessage: '申请数量'
            })}`]: v.startApplyNum,
            [`${year}` + `${formatMessage({
                id: 'tablePanel.list.endApplyNum',
                defaultMessage: '申请数量'
            })}`]: v.endApplyNum,
            [`${year - 1}` + `${formatMessage({
                id: 'tablePanel.list.endPassRate',
                defaultMessage: '通过率'
            })}`]: v.startPassRate,
            [`${year}` + `${formatMessage({
                id: 'tablePanel.list.endPassRate',
                defaultMessage: '通过率'
            })}`]: v.endPassRate,
        }));
        //柱状图与折线图
        const dsRate = new DataSet();
        dsRate.setState('type', '');
        const dvRate = dsRate.createView().source(list);
        dvRate.transform({
            type: 'fold',
            fields: [`${year - 1}` + `${formatMessage({
                id: 'tablePanel.list.endApplyNum',
                defaultMessage: '申请数量'
            })}`, `${year}` + `${formatMessage({
                id: 'tablePanel.list.endApplyNum',
                defaultMessage: '申请数量'
            })}`],
            key: 'type', // key字段
            value: 'value', // value字段
        }).transform({
            type: 'filter',
            callback: d => d.type !== dsRate.state.type
        });
        const scale = {
            [`${year - 1}` + `${formatMessage({
                id: 'tablePanel.list.endPassRate',
                defaultMessage: '通过率'
            })}`]: {
                type: 'linear',
                formatter: val => formatPercent(val),
                min: 0
            },
            [`${year}` + `${formatMessage({
                id: 'tablePanel.list.endPassRate',
                defaultMessage: '通过率'
            })}`]: {
                type: 'linear',
                formatter: val => formatPercent(val),
                min: 0
            }
        };
        const legendItems = [
            {
                value: `${year - 1}` + `${formatMessage({
                    id: 'tablePanel.list.endApplyNum',
                    defaultMessage: '申请数量'
                })}`,
                marker: {
                    symbol: 'square',
                    fill: '#A4C2E5',
                    radius: 5
                }
            },
            {
                value: `${year}` + `${formatMessage({
                    id: 'tablePanel.list.endApplyNum',
                    defaultMessage: '申请数量'
                })}`,
                marker: {
                    symbol: 'square',
                    fill: '#F5B297',
                    radius: 5
                }
            },
            {
                value: [`${year - 1}` + `${formatMessage({
                    id: 'tablePanel.list.endPassRate',
                    defaultMessage: '通过率'
                })}`],
                marker: {
                    symbol: 'hyphen',
                    stroke: '#A5A5A5',
                    radius: 5,
                    lineWidth: 3
                }
            },
            {
                value: [`${year}` + `${formatMessage({
                    id: 'tablePanel.list.endPassRate',
                    defaultMessage: '通过率'
                })}`],
                marker: {
                    symbol: 'hyphen',
                    stroke: '#FFC000',
                    radius: 5,
                    lineWidth: 3
                }
            },
        ];
        return (
            <Card>
                {conditions.reportForm === reportFormList.索赔单据报表 && conditions.yearonYear === isYesNo.否 && <Table
                    className="white-space-nowrap"
                    columns={columnsfalse}
                    dataSource={data}
                    rowKey="id"
                    pagination={false}
                    loading={loading || this.state.loading}
                    locale={locale}
                    {...TABLE}/>}
                {conditions.reportForm === reportFormList.索赔单据报表 && conditions.yearonYear === isYesNo.是 && <div>
                    <Table
                        className="white-space-nowrap"
                        columns={columnsTrue}
                        dataSource={data}
                        rowKey="id"
                        pagination={false}
                        loading={loading || this.state.loading}
                        locale={locale}
                        {...TABLE}/>
                    <Card>
                        <DescriptionList size="large" title={<Row><Col span={12}>
                            {formatMessage({
                                id: 'tablePanel.table.billTrueData',
                                defaultMessage: '索赔单据报表-同比'
                            })}</Col></Row>}>
                            {data && data.length > 0 && <Chart forceFit data={dvRate}
                                style={{fontSize: '12'}}
                                height={400} scale={scale}
                                padding={['5%', '10%', '18%']}
                                onGetG2Instance={c => {
                                    this.chart = c;
                                }}>
                                <Legend
                                    custom
                                    allowAllCanceled
                                    items={legendItems}/>
                                <Axis name="month" />
                                <Axis name="value" position={'left'} />
                                <Tooltip />
                                <Geom
                                    type="interval"
                                    position="month*value"
                                    color={['type', value => {
                                        if(value === `${year}` + `${formatMessage({
                                            id: 'tablePanel.list.endApplyNum',
                                            defaultMessage: '申请数量'
                                        })}`)
                                            return '#F5B297';

                                        if(value === `${year - 1}` + `${formatMessage({
                                            id: 'tablePanel.list.endApplyNum',
                                            defaultMessage: '申请数量'
                                        })}`)
                                            return '#A4C2E5';
                                    }]}
                                    adjust={[{
                                        type: 'dodge',
                                        marginRatio: 1 / 1.5,
                                    }]}>
                                    <Label
                                        content="value"
                                        textStyle={{
                                            textBaseline: 'top',
                                            fill: '#404040',
                                            fontSize: '12',
                                        }}/>

                                </Geom>
                                <View data={list} >
                                    <Axis name={`${year - 1}` + `${formatMessage({
                                        id: 'tablePanel.list.endPassRate',
                                        defaultMessage: '通过率'
                                    })}`} position="right" />
                                    <Geom type="line" position={`month*${`${year - 1}` + `${formatMessage({
                                        id: 'tablePanel.list.endPassRate',
                                        defaultMessage: '通过率'
                                    })}`}`} color="#A5A5A5" size={3} >
                                        <Label
                                            content={`${year - 1}` + `${formatMessage({
                                                id: 'tablePanel.list.endPassRate',
                                                defaultMessage: '通过率'
                                            })}`}
                                            textStyle={{
                                                textAlign: 'middle',
                                                fill: '#404040',
                                                fontSize: '12',
                                            }}/>
                                    </Geom>
                                    <Axis name={`${year}` + `${formatMessage({
                                        id: 'tablePanel.list.endPassRate',
                                        defaultMessage: '通过率'
                                    })}`} position="right" />
                                    <Geom type="line" position={`month*${`${year}` + `${formatMessage({
                                        id: 'tablePanel.list.endPassRate',
                                        defaultMessage: '通过率'
                                    })}`}`} color="#FFC000" size={3} >
                                        <Label
                                            content={`${year}` + `${formatMessage({
                                                id: 'tablePanel.list.endPassRate',
                                                defaultMessage: '通过率'
                                            })}`}
                                            textStyle={{
                                                textAlign: 'middle',
                                                fill: '#404040',
                                                fontSize: '12',
                                            }}/>
                                    </Geom>
                                </View>
                            </Chart>}
                        </DescriptionList>
                    </Card>
                </div>}
            </Card>
        );
    }
}

TablePanel.propTypes = {
    conditions: PropTypes.object.isRequired,
    data: PropTypes.array.isRequired,
    hasError: PropTypes.string.isRequired,
    loading: PropTypes.bool.isRequired,
    intl: PropTypes.object,
};
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
const getData = selectorFactory(['page', 'domainData', 'list', 'data']);
const getConditions = selectorFactory(['page', 'appState', 'queryCondition']);
const mapStateToProps = state => ({
    data: getData(state),
    conditions: getConditions(state),
    loading: state.getIn(['page', 'domainData', 'list', 'isFetching']),
    hasError: state.getIn(['page', 'domainData', 'list', 'hasError']),
});

import {connect} from 'react-redux';
export default connect(mapStateToProps, null)(injectIntl(TablePanel));
